<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				/*宽200高400 1个像素边框实线红色*/
				width: 200px;
				height: 400px;
				border: 1px solid red;
			}

			div:first-child {
				/* 结构伪类选择器 选亲兄弟 */
				/*  一个数值表示4个角都是相同的 10px 的弧度 */
				border: 1px solid blue;
				border-radius: 10px;
			}

			div:nth-child(2) {
				/*  100px   50% 取宽度和高度 一半  则会变成一个圆形 */
				border-radius: 50%;
			}

			div:nth-child(3) {
				/* 左上角  和 右下角  是 10px  右上角 左下角 40 对角线 */
				border-radius: 10px 40px;
			}

			div:nth-child(4) {
				/* 左上角 10    右上角  左下角 40   右下角80 */
				border-radius: 10px 40px 80px;
			}

			div:nth-child(5) {
				/* 左上角 10    右上角 40  右下角 80   左下角   右下角100 */
				border-radius: 10px 40px 80px 100px;
			}

			div:nth-child(6) {
				/*圆角100px 高100px*/
				width: 100px;
				border-radius: 100px;
			}

			div:nth-child(7) {
				border-radius: 100px 0;
			}
		</style>
		
		<style>
			h1{
				width:200px;
				/*padding: 50px;*//*四个方位都是50个像素*/
				/*内边距不能有负数*/
				padding-top:-50px;
				padding-right: 50px;
				padding-bottom: 50px;
				padding-left: 50px;
				
				/*外边距*/
				/*margin: 50px;*/
				margin-top:50px;
				margin-right:50px;
				margin-bottom: 5px;
				margin-left: 50px;
			}
		</style>

	</head>
	<body>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>

		<hr>
		<h1>h1标题</h1>
		<h2>h2标题</h2>
	</body>
</html>
